<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>测试所有权</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            min-height: 100vh;
            background: linear-gradient(135deg, #003366 0%, #0099cc 30%, #66ccff 70%, #99ffff 100%);
            padding: 20px;
        }

        .form-container {
            background-color: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            width: 400px;
            margin: 0 auto;
        }

        .input-field {
            width: 100%;
            padding: 8px;
            margin-top: 5px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .btn-verify {
            background-color: #007bff;
            color: white;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
        }

        .btn-verify:hover {
            background-color: #0056b3;
        }

        .message {
            margin-top: 15px;
            font-weight: bold;
        }

        .btn-copy {
            background: #f0f9ff;
            border: none;
            border-radius: 50%;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background 0.2s;
            margin-left: 2px;
        }

        .btn-copy:hover {
            background: #e0e7ef;
        }
    </style>

</head>

<! 主要是页面美化的代码 -->

<body>
    <!-- 页面主标题 -->
    <h1 class="text-3xl font-bold text-white mb-6 text-center">测试所有权</h1>

    <!-- 表单容器，包含输入框和按钮 -->
    <div class="form-container">
        <form id="verify-form">
            <!-- 所有权令牌标签 -->
            <label for="token">所有权令牌:</label>
            <!-- 包含令牌输入框和复制按钮的容器 -->
            <div style="display:flex;align-items:center;gap:8px;">
                <!-- 只读的令牌输入框，初始值从模板变量中获取 -->
                <input type="text" id="token" class="input-field" value="{{ token }}" readonly style="flex:1;">
                <!-- 复制按钮，点击后调用copyToken函数 -->
                <button type="button" class="btn-copy" onclick="copyToken()" title="复制令牌">
                    <!-- 使用SVG图标表示复制操作 -->
                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#007bff" stroke-width="2"
                        stroke-linecap="round" stroke-linejoin="round">
                        <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                        <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
                    </svg>
                </button>
            </div>

            <!-- 数字签名标签 -->
            <label for="signature">数字签名:</label>
            <!-- 数字签名输入框，初始值从模板变量中获取 -->
            <input type="text" id="signature" class="input-field" value="{{ signature }}">

            <!-- 认证按钮，点击后调用verifySignature函数 -->
            <button type="button" class="btn-verify" onclick="verifySignature()">认证</button>
        </form>
        <!-- 显示验证结果的消息区域 -->
        <div id="message" class="message"></div>
    </div>

    <!-- JavaScript脚本部分 -->
    <script>
        // 复制令牌到剪贴板的函数
        function copyToken() {
            const token = document.getElementById('token').value;
            navigator.clipboard.writeText(token);
            alert('令牌已复制到剪贴板！');
        }

        // 验证数字签名的函数
        function verifySignature() {
            const token = document.getElementById('token').value;
            const signature = document.getElementById('signature').value;
            fetch(`{% url 'verify_signature' %}?token=${token}&signature=${signature}`)
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    const messageDiv = document.getElementById('message');
                    if (data.success) {
                        messageDiv.textContent = `该数据属于：用户${data.owner_phone}`;
                        messageDiv.style.color = 'green';
                    } else {
                        messageDiv.textContent = data.message;
                        messageDiv.style.color = 'red';
                    }
                })
                .catch(error => {
                    console.error('Fetch error:', error);
                    const messageDiv = document.getElementById('message');
                    messageDiv.textContent = '请求出错，请稍后重试！';
                    messageDiv.style.color = 'red';
                });
        }
    </script>

</body>

</html>